<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" EnableViewState="false" Title="Multiple" %>
<%@ Import Namespace="Krystalware.SlickUpload" %>
<%@ Import Namespace="Krystalware.SlickUpload.Web" %>
<%@ Import Namespace="Krystalware.SlickUpload.Web.Mvc" %>

<asp:Content ContentPlaceHolderID="head" runat="server">

    <script type="text/javascript">
        
        function startUpload()
        {
            var slickUpload = kw("slickUpload");

            if (slickUpload)
                slickUpload.start();
        }
        
        
        function cancelUpload()
        {
            kw("slickUpload").cancel();

            document.getElementById("cancelButton").style.display = "none";
        }


        function onFileSelectionChanged(data)
        {
            var hasFiles = kw("fileSelector1").get_Files().length > 0 || kw("fileSelector2").get_Files().length > 0;

            document.getElementById("uploadButton").className = "button" + (hasFiles ? "" : " disabled");
        }

        function onSessionStarted(data)
        {
            
            document.getElementById("uploadButton").style.display = "none";

            document.getElementById("cancelButton").style.display = "block";
        }
        
        function onBeforeSessionEnd(data)
        {
            document.getElementById("uploadButton").style.display = "none";
            document.getElementById("cancelButton").style.display = "none";
        }
        

        
    </script>
</asp:Content>

<asp:Content ContentPlaceHolderID="content" runat="server">

    <% using (Html.BeginForm("UploadResult", "Multiple", FormMethod.Post, new { id = "uploadForm", enctype = "multipart/form-data" })) { %>
        
        <div id="uploadPanel">
            
            <table class="settings">
                <tbody>
                    <tr>
                        <th style="font-weight:bold;border-bottom:solid 1px #ccc">Select files to upload</th>
                    </tr>
                    <tr>
                        <td>
                            

    <h2 style="clear:both;margin-top:.5em;margin-bottom:0">Selector 1</h2>
    <div class="simple su-slickupload">
        <% Html.KrystalwareWebForms(new FileSelector() { 
Id = "fileSelector1",
OnClientFileAdded = "onFileSelectionChanged",
OnClientFileRemoved = "onFileSelectionChanged",
ShowDropZoneOnDocumentDragOver = true,
UploadConnectorId = "slickUpload",
Template = new Template(() => { %>
            
                                <a class="button">
                                    <span><b class="icon add"></b> Add files</span>
                                </a>
                                
<% }),
FolderTemplate = new Template(() => { %>
            
                                <a class="button">
                                    <span><b class="icon add-folder"></b> Add folder</span>
                                </a>
                                
<% }),
DropZoneTemplate = new Template(() => { %>
            
                                <div>Drag and drop files here.</div>                
                                
<% })
 } ); %>  
        <% Html.KrystalwareWebForms(new FileList() { 
Id = "fileList1",
FileSelectorId = "fileSelector1",
ItemTemplate = new Template(() => { %>
            
                                <div class="filedata">
                                    <% Html.KrystalwareWebForms(new FileListElement() { Element = FileListElementType.FileName } ); %>
                                    &ndash;
                                    <% Html.KrystalwareWebForms(new FileListElement() { Element = FileListElementType.FileSize, Template = new Template("(calculating)") } ); %>
                                </div>
                                    <% Html.KrystalwareWebForms(new FileListRemoveCommand() { Template = new Template("[x]") } ); %>
                                    <% Html.KrystalwareWebForms(new FileListElement() { Element = FileListElementType.ValidationMessage } ); %>
                                
<% })
 } ); %>  
        <div style="clear:both"></div>
    </div>  
    <h2 style="clear:both;margin-top:.5em;margin-bottom:0">Selector 2</h2>
    <div class="simple su-slickupload">
        <% Html.KrystalwareWebForms(new FileSelector() { 
Id = "fileSelector2",
OnClientFileAdded = "onFileSelectionChanged",
OnClientFileRemoved = "onFileSelectionChanged",
ShowDropZoneOnDocumentDragOver = true,
UploadConnectorId = "slickUpload",
Template = new Template(() => { %>
            
                                <a class="button">
                                    <span><b class="icon add"></b> Add files</span>
                                </a>
                                
<% }),
FolderTemplate = new Template(() => { %>
            
                                <a class="button">
                                    <span><b class="icon add-folder"></b> Add folder</span>
                                </a>
                                
<% }),
DropZoneTemplate = new Template(() => { %>
            
                                <div>Drag and drop files here.</div>                
                                
<% })
 } ); %>  
        <% Html.KrystalwareWebForms(new FileList() { 
Id = "fileList2",
FileSelectorId = "fileSelector2",
ItemTemplate = new Template(() => { %>
            
                                <div class="filedata">
                                    <% Html.KrystalwareWebForms(new FileListElement() { Element = FileListElementType.FileName } ); %>
                                    &ndash;
                                    <% Html.KrystalwareWebForms(new FileListElement() { Element = FileListElementType.FileSize, Template = new Template("(calculating)") } ); %>
                                </div>
                                    <% Html.KrystalwareWebForms(new FileListRemoveCommand() { Template = new Template("[x]") } ); %>
                                    <% Html.KrystalwareWebForms(new FileListElement() { Element = FileListElementType.ValidationMessage } ); %>
                                
<% })
 } ); %> 
        <div style="clear:both"></div>
    </div> 

<% Html.KrystalwareWebForms(new UploadProgressDisplay() { 
Id = "uploadProgressDisplay",
UploadConnectorId = "slickUpload",
HtmlAttributes = new { Style = "clear:both"},
Template = new Template(() => { %>
        
            <div id="duringUpload">
                <div>
                    Uploading <% Html.KrystalwareWebForms(new UploadProgressElement() { Element = UploadProgressElementType.FileCount } ); %> file(s),
                    <% Html.KrystalwareWebForms(new UploadProgressElement() { Element = UploadProgressElementType.ContentLengthText, Template = new Template("(calculating)") } ); %>.
                </div>
                <div>
                    Currently uploading: <% Html.KrystalwareWebForms(new UploadProgressElement() { Element = UploadProgressElementType.CurrentFileName } ); %>
                    file <% Html.KrystalwareWebForms(new UploadProgressElement() { Element = UploadProgressElementType.CurrentFileIndex } ); %>
                    of <% Html.KrystalwareWebForms(new UploadProgressElement() { Element = UploadProgressElementType.FileCount } ); %>.
                </div>
                <div>
                    Speed: <% Html.KrystalwareWebForms(new UploadProgressElement() { Element = UploadProgressElementType.SpeedText, Template = new Template("(calculating)") } ); %>
                </div>
                <div>
                    <% Html.KrystalwareWebForms(new UploadProgressElement() { Element = UploadProgressElementType.TimeRemainingText, Template = new Template("(calculating)") } ); %>
                </div>
                <div class="progressBarContainer">
                    <% Html.KrystalwareWebForms(new UploadProgressBar()); %>
                    <div class="progressBarText">
                        <% Html.KrystalwareWebForms(new UploadProgressElement() { Element = UploadProgressElementType.PercentCompleteText, Template = new Template("(calculating)") } ); %>
                    </div>
                </div>
            </div>
        
<% })
 } ); %>

<% Html.KrystalwareWebForms(new UploadConnector() { Id = "slickUpload", UploadFormId = "uploadForm", UploadProfile = "multiple", OnClientUploadSessionStarted = "onSessionStarted", OnClientBeforeSessionEnd = "onBeforeSessionEnd" } ); %>


<% Html.KrystalwareWebForms(new KrystalwareScriptRenderer()); %>                            
                        </td>
                    </tr>
                </tbody>
            </table>
            <p>
                        <a id="uploadButton" href="javascript:;" onclick="startUpload()" class="button disabled" >
 <span><b class="icon upload"></b> Upload Files</span>        </a>

                <a id="cancelButton" href="javascript:;" onclick="cancelUpload()" style="display:none" class="button">
                    <span><b class="icon cancel"></b> Cancel</span>
                </a>
                <div style="clear:both"></div>
            </p>
        </div>
    <% } %>
    



</asp:Content>

<asp:Content ContentPlaceHolderID="description" runat="server">

    How to implement multiple file selection areas on one page.
</asp:Content>
